<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.11.0.min.js"></script>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<title>Insert title here</title>

<style type="text/css">
body{
background: url(images/beijing1.jpg) no-repeat;background-size:95% 800%;
}
.oneuser{width:90%;height:60px; margin:5px;display: none;
}
.head {width:60px;; height:100%;border-radius:40px 40px 40px 40px;
}
.head img{border-radius:40px 40px 40px 40px;
}
.username{
}
.twobtn{width:200px;height:50px;margin-top: 10px;margin-left: 10px;
position:absolute;top:520px; left:960px;border:0px;
}
body div{float: left;
border:1px solid #ccc;
}
.top1{border:0px;
}
.top1 div{border:0px;
}
.right{
}
.right div{border:0px;
}
.oneuser{background-color: #defae5;
}
.oneuser:hover{background-color: #f6e1d8;
}
.main div{background-color: #defae5;
}
.middleleft {background-color: white;
}
.middleleft div{background-color: white; 
 } 
input[type ='button']:hover{
background-color:#f6ad90 !important;
}

</style>

<!-- 如果文本框为空则发送按钮无法点 -->
<!-- 如果输入了文字则解除disabled -->
<script type="text/javascript">
	$(function(){
		$('.send').attr('disabled','disabled');
		$('.ta').keyup(function(){
			if($('.ta').val()==""){
			$('.send').attr('disabled','disabled');
		}else{
			$('.send').removeAttr('disabled');
		}
		});
		
		
	})
</script>

<!-- 改变按钮样式 -->
<script type="text/javascript">
	$(function(){
		$("input[type='button']").css('background','green');
		$("input[type='button']").css('color','white');
		$(".right input[type='button']").css('background','white');
		$(".right input[type='button']").css('color','black');
	})
</script>














<!-- 自己与自己交流禁止,关注禁止 -->
<script type="text/javascript">
	$(function(){
		$("div[name='myself${user.userID}']").find('input').attr('disabled','disabled');
	})
</script>


<script type="text/javascript">
	//所有自己发的信息全部右对齐,并且把左头像隐藏
	$(function(){
		$('.chatcontents${user.userID}').css('float','right');
		$('.chatheadleft${user.userID} img').remove();
		$('.chatheadleft${user.userID}').css('border','0px');
		
		$('.chatcontents${chatUser.userID}').css('float','left');
		$('.chatheadright${chatUser.userID} img').remove();
		$('.chatheadright${chatUser.userID}').css('border','0px');
		
	})
</script>


<!-- 点击发送要做什么 -->
<script type="text/javascript">
	$(function(){
		$('.send').click(function(){
			//使发送按钮不可点
			$('.send').attr('disabled','disabled');
			
			//append数据
			var str = $('.ta').val();
// 			$('.middleleft').append("<div class = \"chat${user.userID }\" style = \"width:530px;border:1px solid green;\">	<div class = \"chatheadleft${user.userID }\" style = \"float:left;width:40px;height:40px;border-radius:40px 40px 40px 40px;\">		<img alt=\"\" src=\"${user.path }\" class = \"picchatheadleft${user.userID }\" style = \"width:40px;height:40px;border-radius:40px 40px 40px 40px;\">	</div>	<div class = \"chatcontent\" style = \"margin:6px;border:1px solid red;width:400px;height:40px;\">		<div class = \"chatcontents${user.userID }\" style = \"background-color:green;color:white;height:37px;line-height: 37px;border-radius:10px 10px 10px 10px;border-left:10px solid green;border-right:10px solid green;\">		*******str*******		</div>	</div>	<div class = \"chatheadright${user.userID }\" style = \"float:right;width:40px;height:40px;border-radius:40px 40px 40px 40px;\">		<img alt=\"\" src=\"${user.path }\" style = \"width:40px;height:40px;border-radius:40px 40px 40px 40px;\">	</div></div>");
			$('.middleleft').append("<div class = \"chat${user.userID }\" style = \"width:545px;border:0px solid green;\">	<div class = \"chatheadleft${user.userID }\" style = \"float:left;width:40px;height:40px;border-radius:40px 40px 40px 40px;\">		<img alt=\"\" src=\"${user.path }\" class = \"picchatheadleft${user.userID }\" style = \"width:40px;height:40px;border-radius:40px 40px 40px 40px;\">	</div>	<div class = \"chatcontent\" style = \"margin:6px;border:0px solid red;width:445px;height:40px;\">		<div class = \"chatcontents${user.userID }\" style = \"background-color:green;color:white;height:37px;line-height: 37px;border-radius:10px 10px 10px 10px;border-left:10px solid green;border-right:10px solid green;\">		"+str+"		</div>	</div>	<div class = \"chatheadright${user.userID }\" style = \"float:right;width:40px;height:40px;border-radius:40px 40px 40px 40px;\">		<img alt=\"\" src=\"${user.path }\" style = \"width:40px;height:40px;border-radius:40px 40px 40px 40px;\">	</div></div>");

			//所有自己发的信息全部右对齐,并且把左头像隐藏
			$('.chatcontents${user.userID}').css('float','right');
			$('.chatheadleft${user.userID} img').remove();
			$('.chatheadleft${user.userID}').css('border','0px');
			
			//ajax录入数据库
			$.ajax({
	            url:"${pageContext.request.contextPath}/SendChatServlet",
	            async:false,
	            type:"post",
	            data:{'userID1':"${user.userID}",'userID2':"${chatUser.userID}", 'speakID':"${user.userID}", 'chat':$('.ta').val()},
	            dataType:"json",
	            success:function(d){
	            	if(d.msg == "1"){
	            	}else{
	            		alert(0);
	            	}
					
	            }
	        });
			
			
			//清空输入框
			$('.ta').val("");
			
			
		})
	})
</script>




</head>
<body>
<div id = "paa" name = "1">



<!-- 最上面的框 -->
<div class = "top1" style = "width:100%;height:40px;background-color: green;float: left;">
		<div class = "word33" style = "float:left;width:200px;font-size: 25px;color:white;font-weight: blod;">
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
			&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp✍私信
		</div>
		<div class = "userinfo" style = "margin-left: 800px;width:200px;float: left;">
			<div class = "head" style = "margin-top:2px;width:35px;height: 35px;border-radius:40px;background-color: white;">
				<img alt="" src="${user.path }" style="width:100%;height: 100%;border-radius:40px;">
			</div>
			<div class = "username" style = "color:white;margin-top:2px;width:150px;height: 40px;line-height: 40px;margin-left: 5px;">
				${user.userName }
			</div>
		</div>
		
	</div>





















<!-- 中间的聊天框架 -->
<div class = "main" style = "margin-bottom:30px;border:1px solid green; border-top:20px solid green;margin-top:20px;width:800px;height:570px;margin-left: 120px;">
	<div class = "top" style = "width:100%;height:100px;">
		<div class = "topleft" style = "width:73%;height:100%;">
			<div class = "headdiv" style = "border:5px solid #ccc;width:50px;height:50px;border-radius:40px 40px 40px 40px;">
				<img alt="" src="${chatUser.path }" style = "width:100%;height:100%;border-radius:40px 40px 40px 40px;">
			</div>
			<div class = "userName" style = "border:0px;width:400px;height:30px;margin-top:5px;">
			&nbsp${chatUser.userName }
			</div>
			<div class = "say" style = "border:0px;width:400px;height:30px;margin-top:15px;">
			<b><span style = "color:black; font-size:14px;">个性签名：</span></b><span style = "color:#aaa; font-size: 12px;">${chatUser.say }</span>
			</div>
		</div>
		<div class = "topright" style = "border:0px;width:200px;font-size: 25px;color:green;margin-left:5px;margin-top:60px;text-align: center;font-weight: bold;">
			✪最近分享✪
		</div>
	</div>
	<div class = "middle" style = "width:100%;height:330px;">
		<div class = "middleleft" style = "width:73%;height:100%;overflow: scroll;background-color: white;">
			<c:forEach items="${chatInfo }" var = "n">
				<div class = "chat${n.speakID }" style = "width:545px;border:0px solid green;">
					<div class = "chatheadleft${n.speakID }" style = "float:left;width:40px;height:40px;border-radius:40px 40px 40px 40px;">
						<img alt="" src="${n.path }" class = "picchatheadleft${n.speakID }" style = "width:40px;height:40px;border-radius:40px 40px 40px 40px;">
					</div>
					<div class = "chatcontent" style = "margin:6px;border:0px solid red;width:445px;height:40px;">
						<div class = "chatcontents${n.speakID }" style = "background-color:green;color:white;height:37px;line-height: 37px;border-radius:10px 10px 10px 10px;border-left:10px solid green;border-right:10px solid green;">
						${n.chat }
						</div>
					</div>
					<div class = "chatheadright${n.speakID }" style = "float:right;width:40px;height:40px;border-radius:40px 40px 40px 40px;">
						<img alt="" src="${n.path }" style = "width:40px;height:40px;border-radius:40px 40px 40px 40px;">
					</div>
				</div>
			</c:forEach>
		</div>
		<div class = "middleright" style = "border:0px;width:25%;height:100%;margin-left:5px;overflow: scroll;">
			<c:forEach items="${otherShare }" var = "n">
				<div class = "othersharediv" style = "background-color:white;border:0px;width: 140px;;height:170px;margin-left:20px;margin-top:10px;">
				<div class = "sharepic" style = "width:140px;height:120px;">
					<a href = "${pageContext.request.contextPath }/CommentServlet?shareID=${n.shareID}">
						<img alt="" src="${n.path }" style = "width:100%;height:100%;">
					</a>
				</div>
				<div class = "say11" style = "border:0px;background-color:white;font-size: 12px;width:90%;height:18px;margin-left:5%;margin-right: 5%;overflow: hidden;color:#999;">
					描述：${n.say }
				</div>
			</div>
			</c:forEach>
			
			
		
		</div>
	</div>
	<div class = "bottom" style = "width:100%;height:100px;overflow: scroll;">
		<textarea  rows="" cols="" class="ta" id = "" style = "width:99%;height:92%;font-size: 18px;" ></textarea>
	</div>
	<div class = "lastest" style = "width:100%;height:30px;text-align: right;">
		<a href = "${pageContext.request.contextPath }/ShowMyGoodsServlet?page=1"><input class = "return" type = "button" value = "返回个人主页" style = "font-size: 15px;margin-right:600px;"> 		</a>
		<input class = "send" type = "button" value = "发送" style = "font-size: 20px;"> 
	</div>
</div>


















<!--    右框开始 -->
<div class = "right" style = "border:1px solid green;background-color:white; border-top:20px solid green;width:230px; margin:20px;"><%int i=0; %><div class = "showdiv">
		<c:forEach items = "${Users }" var = "n" varStatus="i">
		<% i++; %>
			<div class = "oneuser" id = "<%= i%>" name = "myself${n.userID }">
		<a href = "${pageContext.request.contextPath }/ShareServlet?page=1&userID=${n.userID}">
				<div class = "head">
					<img alt="" src="${n.path }" style = "width:100%;height:100%;">
				</div>
		</a>
				<div class = "username" style = "width:65%;height:100%;">${n.userName }<br>
					<div class = "focus" style = "margin:2px;width:50px;">
						<input type = "button" value = "关注" style = "" name = "${n.userID }"  class = "focus${n.isFocus } ">
						
					</div>
					<div style = "float: left;margin:2px;">
						<a href = "${pageContext.request.contextPath }/ChatServlet?chatUserID=${n.userID}">
							<input type = "button" value = "私信Ta" name = ""  class = " ">
						</a>
					</div>
				</div>
			</div>
		</c:forEach>
		<div class = "twobtn">
			<div class = "leftbtn" style = ";border:0px;">
				<input type = "button" value="上一页" id = "leftbtn" style = "disabled:block;margin:20px;">
			</div>
			<div class = "rightbtn" style = "border:0px;">
				<input type = "button" value="下一页" id = "rightbtn" style = "disabled:block;margin:20px;">
			</div>
		</div>
		
	</div>
<!-- 	右框结束 -->
</div>














</body>
<script type="text/javascript">
	$(function(){
		$("#leftbtn").attr("disabled", true);
		//设置share.jsp中如果（当前页）pa=1，则上一页按钮不可点， 若pa = 1且总条数小于等于6，则下一页和上一页不可点
		//刚刚进来的时候，设置n1到n6可见， 可以让过滤器来初始化n1到n6为1--6
		if(${sum} <= 6){
			$("#rightbtn").attr("disabled", true);
			
		}
		$("#${n1}").css("display", "block");
		$("#${n2}").css("display", "block");
		$("#${n3}").css("display", "block");
		$("#${n4}").css("display", "block");
		$("#${n5}").css("display", "block");
		$("#${n6}").css("display", "block");
	});
	
</script>

<script type="text/javascript">
	$(function(){
		$("#leftbtn").click(function(){
			//去servlet操作之后， 得到当前的新页码pa， 和判断是否有下一页的标签，
			//在此之前要先判断是否pa=1，若是，则上一页不可点
			//根据是否有下一页的标志，去设置按钮可点与不可
			//设置class为${n1}到${n6}的div显示
			//传入的参数要包含是下一页还是上一页，还有当前页
				var url = "${pageContext.request.contextPath}/FindAllUsersServlet";
				
				$.ajax({
	                url:"${pageContext.request.contextPath}/FindAllUsersServlet",
	                async:false,
	                type:"post",
	                data:{'updown':1,'paa':$("#paa").attr("name")},
	                dataType:"json",
	                success:function(d){
	                	$("#paa").attr("name", d.pa);
						 if(d.pa==1){
							$("#leftbtn").attr("disabled",true);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 3){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 1){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",true);
						}
						
						$("#"+d.a).css("display", "block");
						$("#"+d.b).css("display", "block");
						$("#"+d.c).css("display", "block");
						$("#"+d.d).css("display", "block");
						$("#"+d.e).css("display", "block");
						$("#"+d.f).css("display", "block");
						
						$("#"+d.aa).css("display", "none");
						$("#"+d.bb).css("display", "none");
						$("#"+d.cc).css("display", "none");
						$("#"+d.dd).css("display", "none");
						$("#"+d.ee).css("display", "none");
						$("#"+d.ff).css("display", "none");
						
	                }
	            });
				
				
				
			
		});
	});
</script>




<script type="text/javascript">
	$(function(){
		$(".rightbtn").click(function(){
			//去servlet操作之后， 得到当前的新页码pa， 和判断是否有下一页的标签，
			//在此之前要先判断是否pa=1，若是，则上一页不可点
			//根据是否有下一页的标志，去设置按钮可点与不可
			//设置class为${n1}到${n6}的div显示
			//传入的参数要包含是下一页还是上一页，还有当前页
				$.ajax({
	                url:"${pageContext.request.contextPath}/FindAllUsersServlet",
	                async:false,
	                type:"post",
	                data:{'updown':2,'paa':$("#paa").attr("name")},
	                dataType:"json",
	                success:function(d){
	                	$("#paa").attr("name", d.pa);
	                	if(d.pa==1){
							$("#leftbtn").attr("disabled",true);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 3){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",false);
						}else if(d.btn == 1){
							$("#leftbtn").attr("disabled",false);
							$("#rightbtn").attr("disabled",true);
						}
						
						$("#"+d.a).css("display", "block");
						$("#"+d.b).css("display", "block");
						$("#"+d.c).css("display", "block");
						$("#"+d.d).css("display", "block");
						$("#"+d.e).css("display", "block");
						$("#"+d.f).css("display", "block");
						
						$("#"+d.aa).css("display", "none");
						$("#"+d.bb).css("display", "none");
						$("#"+d.cc).css("display", "none");
						$("#"+d.dd).css("display", "none");
						$("#"+d.ee).css("display", "none");
						$("#"+d.ff).css("display", "none");
	                }
	            });
				
				
			
		});
	});
</script>

<script type="text/javascript">
//设置按钮已关注*****
//设置点击关注按钮***
$(function(){
	
	$(".focus1").val("已关注");
	$(".focus1").attr('disabled','disabled');
	$(".focus input").click(function(){
		var s = 0;
		if("${user}" != ""){//FocusServlet
			$.ajax({
	            url:"${pageContext.request.contextPath}/FocusServlet",
	            async:false,
	            type:"post",
	            data:{'beUserID':$(this).attr("name"),'userID':'${user.userID}'},
	            dataType:"json",
	            success:function(d){
	            	if(d.focus == "1"){
	            		alert("关注成功");
	            		s = 1;
	            	}else{
	            		alert("关注失败");
	            	}
					
	            }
	        });
		if(s == 1){
			$(this).attr('disabled','disabled');
			$(this).val("已关注");
		}
			
			
		
		}else{
			alert("请先登录");
		}
		
	});
})
</script>


</html>